<template>
  <!-- 错误提示框 -->
  <div
    class="notification-container"
    :class="{
      'notification-success': type === 'success',
      'notification-error': type === 'error',
      'fade-out': isFadingOut,
    }"
  >
    <div class="notification">
      {{ message }}
      <button class="notification-close" @click="closeNotification">×</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "NotificationComponent",
  props: {
    message: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: "info",
    },
    isFadingOut: {
      // 添加 isFadingOut prop
      type: Boolean,
      default: false,
    },
  },
  methods: {
    closeNotification() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
.notification {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  position: relative;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-success {
  background-color: rgba(106, 186, 109, 0.4);
  color: white;
}

.notification-error {
  background-color: rgba(244, 67, 54, 0.6);
  color: white;
}

.notification-close {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #999;
  padding: 0 5px;
}

.notification-container {
  /* 使用 flex 布局水平居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直方向默认就是 flex-start，但如果需要明确指定也可以写上 */
  height: 100vh; /* 假设通知是页面上的独立元素 */
  /* 可以添加一个 padding-top 来让 notification 距离顶部更远 */
  padding-top: 0px; /* 根据需要调整这个值 */
}

.notification {
  /* 设置一个较短的宽度 */
  width: 300px; /* 或者使用百分比，如 width: 50%; */
  padding: 10px;
  margin-top: 20px;
  margin: 10px 0;
  border-radius: 5px;
  background-color: #e7e7e7;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 添加淡入淡出动效 */
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* 隐藏通知时的样式 */
.notification.fade-out {
  opacity: 0;
  /* 防止在淡出时点击按钮 */
  pointer-events: none;
}
</style>
